<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 5.4.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png">
  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png">
  <link rel="mask-icon" href="/images/logo.svg" color="#222">

<link rel="stylesheet" href="/css/main.css">


<link rel="stylesheet" href="/lib/font-awesome/css/all.min.css">

<script id="hexo-configurations">
    var NexT = window.NexT || {};
    var CONFIG = {"hostname":"vchao.top","root":"/","scheme":"Muse","version":"7.8.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12,"onmobile":false},"copycode":{"enable":false,"show_result":false,"style":null},"back2top":{"enable":true,"sidebar":false,"scrollpercent":false},"bookmark":{"enable":false,"color":"#222","save":"auto"},"fancybox":false,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"algolia":{"hits":{"per_page":10},"labels":{"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}},"localsearch":{"enable":false,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}}};
  </script>

  <meta name="description" content="概念什么是矢量图，SVG SVG全称：可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟（W3C）的标准，与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体  与位图（Bitmap）相对，SVG不会像位图一样因为缩放而让图">
<meta property="og:type" content="article">
<meta property="og:title" content="SVG - 在Android中使用矢量图全攻略">
<meta property="og:url" content="http://vchao.top/2021/08/25/SVG%20-%20%E5%9C%A8Android%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%85%A8%E6%94%BB%E7%95%A5/index.html">
<meta property="og:site_name" content="乘风破浪">
<meta property="og:description" content="概念什么是矢量图，SVG SVG全称：可伸缩矢量图形 (Scalable Vector Graphics)SVG 用来定义用于网络的基于矢量的图形SVG 使用 XML 格式定义图形SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失SVG 是万维网联盟（W3C）的标准，与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体  与位图（Bitmap）相对，SVG不会像位图一样因为缩放而让图">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2021-08-25T14:42:51.136Z">
<meta property="article:modified_time" content="2021-08-25T14:37:20.796Z">
<meta property="article:author" content="vchao">
<meta property="article:tag" content="Android">
<meta property="article:tag" content="SVG">
<meta name="twitter:card" content="summary">

<link rel="canonical" href="http://vchao.top/2021/08/25/SVG%20-%20%E5%9C%A8Android%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%85%A8%E6%94%BB%E7%95%A5/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome : false,
    isPost : true,
    lang   : 'zh-CN'
  };
</script>

  <title>SVG - 在Android中使用矢量图全攻略 | 乘风破浪</title>
  






  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>

  <div class="site-meta">

    <a href="/" class="brand" rel="start">
      <span class="logo-line-before"><i></i></span>
      <h1 class="site-title">乘风破浪</h1>
      <span class="logo-line-after"><i></i></span>
    </a>
  </div>

  <div class="site-nav-right">
    <div class="toggle popup-trigger">
    </div>
  </div>
</div>




<nav class="site-nav">
  <ul id="menu" class="main-menu menu">
        <li class="menu-item menu-item-home">

    <a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a>

  </li>
  </ul>
</nav>




</div>
    </header>

    
  <div class="back-to-top">
    <i class="fa fa-arrow-up"></i>
    <span>0%</span>
  </div>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content post posts-expand">
            

    
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block" lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://vchao.top/2021/08/25/SVG%20-%20%E5%9C%A8Android%E4%B8%AD%E4%BD%BF%E7%94%A8%E7%9F%A2%E9%87%8F%E5%9B%BE%E5%85%A8%E6%94%BB%E7%95%A5/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/images/avatar.gif">
      <meta itemprop="name" content="vchao">
      <meta itemprop="description" content="怀揣好奇，梦想改变世界的菜鸟极客">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="乘风破浪">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          SVG - 在Android中使用矢量图全攻略
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-calendar"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2021-08-25 22:42:51 / 修改时间：22:37:20" itemprop="dateCreated datePublished" datetime="2021-08-25T22:42:51+08:00">2021-08-25</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="far fa-folder"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/Android/" itemprop="url" rel="index"><span itemprop="name">Android</span></a>
                </span>
            </span>

          

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <h1 id="概念"><a href="#概念" class="headerlink" title="概念"></a>概念</h1><h2 id="什么是矢量图，SVG"><a href="#什么是矢量图，SVG" class="headerlink" title="什么是矢量图，SVG"></a>什么是矢量图，SVG</h2><blockquote>
<p>SVG全称：可伸缩矢量图形 (Scalable Vector Graphics)<br>SVG 用来定义用于网络的基于矢量的图形<br>SVG 使用 XML 格式定义图形<br>SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失<br>SVG 是万维网联盟（W3C）的标准，与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体</p>
</blockquote>
<p>与位图（Bitmap）相对，SVG不会像位图一样因为缩放而让图片质量下降。</p>
<h2 id="优缺点"><a href="#优缺点" class="headerlink" title="优缺点"></a>优缺点</h2><p><strong>优点：</strong><br>1.矢量图使用点和线来描述图形，所有文件会比较小，同时也能提供高清晰的画面。<br>2.矢量图缩放自由且不会失真，完全适配于任何分辨率的屏幕。<br>3.矢量图是以xml语言来描述的，所以它修改自如，节约空间，使用方便。<br>4.矢量图色彩分辨率非常高清，同时支持滤镜。<br>5.跨平台，因为矢量图是纯文本格式来描述的，所以不受平台的限制。</p>
<p><strong>缺点：</strong><br>SVG 是在要用图的时候再把图画出来，所以在图片显示的时候会花费更多的时间消耗更多的资源；此外，SVG 并不太适合层次过于复杂细节过于繁多的图片。</p>
<p>简单来说，SVG就是描述图形的xml文件，缩放不变形。<br>和安卓中的shape有点异曲同工之妙。</p>
<h2 id="获取SVG图片"><a href="#获取SVG图片" class="headerlink" title="获取SVG图片"></a>获取SVG图片</h2><h3 id="获取途径"><a href="#获取途径" class="headerlink" title="获取途径"></a>获取途径</h3><p>SVG的获取途径有以下几种：</p>
<ol>
<li>Android自身提供</li>
<li>美工切图</li>
<li>自己从网站下载</li>
</ol>
<p>android提供的矢量图多数不能满足我们的需求，美工切图的情况此处略去不表，来讲讲从网站下载的方法。 </p>
<h3 id="【iconfont】阿里妈妈矢量图标平台"><a href="#【iconfont】阿里妈妈矢量图标平台" class="headerlink" title="【iconfont】阿里妈妈矢量图标平台"></a>【iconfont】阿里妈妈矢量图标平台</h3><p>在Android上如何使用，官网已经做了非常详细的介绍。<br>建议先戳 —&gt;   <a target="_blank" rel="noopener" href="http://www.iconfont.cn/help/detail?helptype=code">http://www.iconfont.cn/help/detail?helptype=code</a></p>
<p><strong>使用流程</strong><br>使用起来也很简单,总结就是：</p>
<ul>
<li>首先新建一个自己的项目;</li>
<li>从iconfont平台选择要使用到的图标或者本地导入svg图片到项目中；</li>
<li>下载代码,把iconfont.svg和iconfont.ttf文件导入到项目中的assets文件夹中；</li>
<li>用TextView代替ImagerView，找到图标相对应的 HTML 实体字符码给textView设置；</li>
<li>textview设置大小跟颜色，图标的大小颜色也会改变（这里大小最好用dp为单位，这样不会随着手机字体大小的改变而改变图标的大小）；</li>
<li>为Textview设置指定的ttf文字；<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">   <span class="attr">android:layout_width</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">   <span class="attr">android:layout_height</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">   <span class="attr">android:text</span>=<span class="string">&quot;<span class="symbol">&amp;#xe6dd;</span>&quot;</span></span></span><br><span class="line"><span class="tag">   <span class="attr">android:textSize</span>=<span class="string">&quot;50dp&quot;</span>/&gt;</span></span><br></pre></td></tr></table></figure>
//为TextView设置指定ttf文字<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">Typeface iconfont = Typeface.createFromAsset(getAssets(), <span class="string">&quot;iconfont/iconfont.ttf&quot;</span>);</span><br><span class="line">TextView textview = (TextView)findViewById(R.id.text_icon);</span><br><span class="line">textview.setTypeface(iconfont);</span><br></pre></td></tr></table></figure></li>
</ul>
<h3 id="iconfont的封装"><a href="#iconfont的封装" class="headerlink" title="iconfont的封装"></a>iconfont的封装</h3><p>每次都给TextView设置指定文字也很繁琐，而且不断读取iconfont.ttf文字,也会浪费内存。我们可以做个优化，把这个抽离出来。<br>首先我们要读取到的是assets目录下的iconfont.ttf文件；这里我把它放到自定义的Application中，这样就只要读取一次，代码如下：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyApplication</span> <span class="keyword">extends</span> <span class="title">Application</span> </span>&#123;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="keyword">static</span> Typeface iconfont;</span><br><span class="line"></span><br><span class="line">...</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">public</span> <span class="keyword">static</span> Typeface <span class="title">getIconfont</span><span class="params">(Context context)</span> </span>&#123;</span><br><span class="line">    <span class="keyword">if</span> (iconfont != <span class="keyword">null</span>) &#123;</span><br><span class="line">        <span class="keyword">return</span> iconfont;</span><br><span class="line">    &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">        iconfont = Typeface.createFromAsset(context.getAssets(), <span class="string">&quot;iconfont/iconfont.ttf&quot;</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">return</span> iconfont;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>这里就实例化了iconfont。然后给每TextView设置Typeface，这肯定不是我们想要的，所以我们可以通过自定义控件的方式，在初始化时执行setTypeface。代码如下：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">TextViewIcon</span> <span class="keyword">extends</span> <span class="title">AppCompatTextView</span> </span>&#123;</span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="title">TextViewIcon</span><span class="params">(Context context)</span> </span>&#123;</span><br><span class="line">	    <span class="keyword">super</span>(context);</span><br><span class="line">	    init(context);</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="title">TextViewIcon</span><span class="params">(Context context, AttributeSet attrs)</span> </span>&#123;</span><br><span class="line">	    <span class="keyword">super</span>(context, attrs);</span><br><span class="line">	    init(context);</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="function"><span class="keyword">public</span> <span class="title">TextViewIcon</span><span class="params">(Context context, AttributeSet attrs, <span class="keyword">int</span> defStyleAttr)</span> </span>&#123;</span><br><span class="line">	    <span class="keyword">super</span>(context, attrs, defStyleAttr);</span><br><span class="line">	    init(context);</span><br><span class="line">	&#125;</span><br><span class="line">	</span><br><span class="line">	<span class="function"><span class="keyword">private</span> <span class="keyword">void</span> <span class="title">init</span><span class="params">(Context context)</span> </span>&#123;</span><br><span class="line">	    setTypeface(VcApplication.getIconfont(context));</span><br><span class="line">	&#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>如此即可在layout文件中直接使用了</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">com.xxxxx.xxxxx.TextViewIcon</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:id</span>=<span class="string">&quot;@+id/text_icon&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:text</span>=<span class="string">&quot;<span class="symbol">&amp;#xe643;</span>&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:textColor</span>=<span class="string">&quot;#ff0000&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:textSize</span>=<span class="string">&quot;50sp&quot;</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="iconfont动态设置"><a href="#iconfont动态设置" class="headerlink" title="iconfont动态设置"></a>iconfont动态设置</h2><p>动态设置通俗的说就是在java代码里动态的调整图标的大小颜色或改变图片，iconfont改变大小颜色这很简单直接调用TextView的setTextSize和setTextColor就可以了，动态设置图片是不是setText呢？</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">textview.setText(<span class="string">&quot;&amp;#xe643;&quot;</span>);</span><br></pre></td></tr></table></figure>
<p>运行发现并不如我们所愿，这里涉及到unicode 字符的问题,<br>把代码稍改一下,用 unicode 字符来表示,”&amp;#x” 替换成 “\u”，改成下面这样，问题就可以解决</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">textview.settext(<span class="string">&quot;\ue643&quot;</span>);<span class="comment">// &quot;&amp;#x&quot; 替换成 &quot;\u&quot;，用 unicode 字符来表示</span></span><br></pre></td></tr></table></figure>


<h1 id="使用SVG"><a href="#使用SVG" class="headerlink" title="使用SVG"></a>使用SVG</h1><p>首先需要明确的是：Android不支持直接在项目中使用svg的图片。<br>但是Google在Android5.X中提供了两个新API来支持SVG： </p>
<ul>
<li>VectorDrawable </li>
<li>AnimatedVectorDrawable</li>
</ul>
<p>所以在Android中使用SVG的话，要区分5.0以上以及5.0以下的不同情况。</p>
<p>在Android Studio 使用SVG矢量图<br>在drawable文件夹上右键-&gt;new-&gt;Vector Asset </p>
<p>选择自带的图标或者从本地选取</p>
<p>android:viewportWidth与android:viewportHeight:是指当前Drawable对应的虚拟Canvas的大小, 之所以说是虚拟的是因为实际上并不存在这样一个Canvas, 又之所以需要这个值是因为在+ + 标签中的路径数据要基于具体的坐标系来绘制.</p>
<p><code>&lt;vector&gt;</code> 是 VectorDrawable 对应的根标签<br>android:width与android:height:对应矢量图的实际大小</p>
<blockquote>
<p>矢量图是可以无限大且不失真的, 但通常一个图片都会有一个原始大小,将在其父控件大小都设置为wrap_content时起作用)<br> 基于加载性能考虑，Google推荐限定在 200x200dp 以内。</p>
</blockquote>
<p>android:viewportWidth与android:viewportHeight是指当前Drawable对应的Canvas的大小，<br>一般与上面的android:width与android:height:成比例定义。</p>
<blockquote>
<p>用于为<code>&lt;path/&gt;</code>标签中的路径数据提供绘制位置的参考坐标系及绘制范围<br><code>&lt;path/&gt;</code>标签对应路径信息, 这里的path与我们自定义绘制图形时用的Path原理一样, 就是记录一些绘图操作, 具体对应其中的 pathData。</p>
</blockquote>
<p>android:fillColor为默认黑色（#FF000000）时，在View容器内将使用tint颜色取代，否则将呈现为android:fillColor与tint的混合颜色。</p>
<p><code>&lt;path/&gt;</code>标签:对应路径信息, 这里的path与我们自定义绘制图形时用的Path原理一样, 就是记录一些绘图操作, 具体对应其中的pathData.PathData中对应的路径描述符号不需要我们去记, 通常情况下由绘图软件生成svg图片再从svg文件中提取.<br><code>&lt;path/&gt;</code>路径的路径描述指令含义表：</p>
<p>M = moveto 相当于 android Path 里的moveTo(),用于移动起始点<br>L = lineto 相当于 android Path 里的lineTo()，用于画线<br>H = horizontal lineto 用于画水平线<br>V = vertical lineto 用于画竖直线<br>C = curveto 相当于cubicTo(),三次贝塞尔曲线<br>S = smooth curveto 同样三次贝塞尔曲线，更平滑<br>Q = quadratic Belzier curve quadTo()，二次贝塞尔曲线<br>T = smooth quadratic Belzier curveto 同样二次贝塞尔曲线，更平滑<br>A = elliptical Arc 相当于arcTo()，用于画弧<br>Z = closepath 相当于closeTo(),关闭path</p>
<p>大写代表绝对位置, 小写代表相对位置<br>官方标准定义细则参考：SVG Paths Definition - W3C</p>
<p>矢量图创建完成后使用方法跟其他格式的图片用法一样。</p>
<p>我们这里提供三种解决方案：</p>
<ul>
<li><p>使用支持库PathView<br><a target="_blank" rel="noopener" href="https://github.com/geftimov/android-pathview">https://github.com/geftimov/android-pathview</a><br>不仅支持直接使用svg，还可以自定义路径，使用是 svg动画。详情请看github介绍</p>
</li>
<li><p>将SVG转换为VectorDrawable<br><a target="_blank" rel="noopener" href="http://inloop.github.io/svg2android/">http://inloop.github.io/svg2android/</a><br>该在线网站可以将svg转换为VectorDrawable</p>
</li>
<li><p>将矢量图制作成字体图标<br>step1:从iconfont平台选取图标下载到本地，复制字体文件到项目的assets目录。<br>step2:打开下载下来的文件，并打开demo.html,找到图标对应的HTML实体字符码。<br>step3:打开res／values／strings.xml，添加string值。</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">resources</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">&quot;app_name&quot;</span>&gt;</span>My Application<span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">&quot;icon_cart&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">string</span> <span class="attr">name</span>=<span class="string">&quot;icon_wl&quot;</span>&gt;</span><span class="tag">&lt;/<span class="name">string</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">resources</span>&gt;</span></span><br></pre></td></tr></table></figure></li>
</ul>
<p>step4:为TextView设置string值。</p>
<p>step5:为TextView指定文字。</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@Override</span></span><br><span class="line"><span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>&#123;</span><br><span class="line">     <span class="keyword">super</span>.onCreate(savedInstanceState);</span><br><span class="line">     setContentView(R.layout.activity_main);</span><br><span class="line">     mTv = (TextView) findViewById(R.id.tv_main);</span><br><span class="line">     Typeface iconfont = Typeface.createFromAsset(getAssets(),    <span class="string">&quot;iconfont.ttf&quot;</span>);</span><br><span class="line">     mTv.setTypeface(iconfont);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>


<p>5.封装使用<br>上面的使用的方式需要对每一个TextView指定字体，并且需要下载图标并获取对应的字符编码，使用起来非常的麻烦，github上提供了一个开源的库封装了操作，简化了使用：<br><a target="_blank" rel="noopener" href="https://github.com/mikepenz/Android-Iconics">https://github.com/mikepenz/Android-Iconics</a></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:text</span>=<span class="string">&quot;&#123;gmd-chart&#125; Chart&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:textColor</span>=<span class="string">&quot;@android:color/black&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">&quot;56dp&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:textSize</span>=<span class="string">&quot;16sp&quot;</span>/&gt;</span></span><br></pre></td></tr></table></figure>

<p>6.SVG动画</p>
<p>6.1 使用AnimatedVectorDrawable来实现动画<br>SVG学习–AnimatedVectorDrawable的使用</p>
<p>6.2 使用三方库-PathView</p>
<h1 id="可能遇见的坑"><a href="#可能遇见的坑" class="headerlink" title="可能遇见的坑"></a>可能遇见的坑</h1><h2 id="VectorDrawable"><a href="#VectorDrawable" class="headerlink" title="VectorDrawable"></a>VectorDrawable</h2><p>要想在Android使用svg，首先要介绍的肯定是VectorDrawable，VectorDrawable是Android 5.0系统中引入了 VectorDrawable 来支持矢量图(SVG)，同时还引入了 AnimatedVectorDrawable 来支持矢量图动画。<br>官方文档：<br>VectorDrawable,AnimatedVectorDrawable<br>VectorDrawable转换Bitmap</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">Bitmap bitmap;</span><br><span class="line">   <span class="keyword">if</span> (Build.VERSION.SDK_INT&gt;Build.VERSION_CODES.LOLLIPOP)&#123;</span><br><span class="line">       Drawable vectorDrawable = context.getDrawable(R.id.img_vector);</span><br><span class="line">       bitmap = Bitmap.createBitmap(vectorDrawable.getIntrinsicWidth(), vectorDrawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);</span><br><span class="line">       Canvas canvas = <span class="keyword">new</span> Canvas(bitmap);</span><br><span class="line">       vectorDrawable.setBounds(<span class="number">0</span>, <span class="number">0</span>, canvas.getWidth(), canvas.getHeight());</span><br><span class="line">       vectorDrawable.draw(canvas);</span><br><span class="line">   &#125;<span class="keyword">else</span> &#123;</span><br><span class="line">       Drawable drawable = AppCompatDrawableManager.get().getDrawable(context, R.id.img_vector);</span><br><span class="line">       bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);</span><br><span class="line">       Canvas canvas = <span class="keyword">new</span> Canvas(bitmap);</span><br><span class="line">       drawable.setBounds(<span class="number">0</span>, <span class="number">0</span>, canvas.getWidth(), canvas.getHeight());</span><br><span class="line">       drawable.draw(canvas);</span><br><span class="line">   &#125;</span><br></pre></td></tr></table></figure>

<h2 id="5-0以上版本使用"><a href="#5-0以上版本使用" class="headerlink" title="5.0以上版本使用"></a>5.0以上版本使用</h2><p>Android studio在2.0的版本中可以直接使用svg<br>新建一个SVGDemo项目，</p>
<p>新建Vector Asset文件 </p>
<p>File -&gt; New -&gt; Vector Asset </p>
<p>导入SVG </p>
<p>可以选择Google提供的Material Icon进行导入也可以选择Local File选择本地svg文件进行导入，一般选择后者。对文件命名后点击Next -&gt;Finish在drawable目录下就添加了一个.xml的文件<br>点击可以进行预览，一看是不是很像selector、animation-list只是标签为vector标签 width、height为对应的宽高，可以进行设置，viewportWidth、viewportHeight这个我也不太了解大概就是视图的宽高吧，好像作用不大，没有设置过。path为html中的一个标签用来定义路径，我们只关心path标签中的android:fillColor=”#FBDC00”的属性，用来改变颜色。 </p>
<p>使用SVG</p>
<p>在layout新建一个activity_svg.xml文件</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">   <span class="attr">android:layout_width</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">   <span class="attr">android:layout_height</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">   <span class="attr">android:src</span>=<span class="string">&quot;@drawable/ic_china&quot;</span>/&gt;</span></span><br></pre></td></tr></table></figure>
<p>就是这样简单，也可以当背景使用 </p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">LinearLayout</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:background</span>=<span class="string">&quot;@drawable/ic_china&quot;</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>

<h2 id="5-0以下版本使用SVG"><a href="#5-0以下版本使用SVG" class="headerlink" title="5.0以下版本使用SVG"></a>5.0以下版本使用SVG</h2><p>上面说了在Android5.0以上使用svg图片是没有任何问题，但是怎么兼容5.0以下的机型，很多github第三方开源库可以解决，其实google已经给出了解决方案，我们主要了解原生的解决办法。 </p>
<p>添加兼容性支持<br>首先，你需要在项目的build.gradle脚本中，增加对Vector兼容性的支持，代码如下所示： </p>
<figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">android &#123; </span><br><span class="line">	defaultConfig &#123; </span><br><span class="line">		vectorDrawables.useSupportLibrary = <span class="keyword">true</span> </span><br><span class="line">	&#125; </span><br><span class="line">&#125; </span><br></pre></td></tr></table></figure>
<p>在defaultConfig中添加了</p>
<figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vectorDrawables.useSupportLibrary = <span class="keyword">true</span></span><br></pre></td></tr></table></figure>
<p>当然还需要添加appcompat的支持</p>
<figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">compile</span> <span class="string">&#x27;com.android.support:appcompat-v7:23.4.0&#x27;</span></span><br></pre></td></tr></table></figure>
<p>在ImageView中使用<br>我们要引用support:appcompat-v7中的view首先我们需要在XML布局文件头部添加：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">xmlns:app=&quot;http://schemas.android.com/apk/res-auto&quot;</span><br></pre></td></tr></table></figure>

<p>2、 用V7下的AppCompatImageView代替ImageView<br>3、将android:src属性，换成app:srcCompat即可<br>代码如下 :</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">LinearLayout</span> <span class="attr">xmlns:android</span>=<span class="string">&quot;http://schemas.android.com/apk/res/android&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">xmlns:app</span>=<span class="string">&quot;http://schemas.android.com/apk/res-auto&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">android:layout_width</span>=<span class="string">&quot;match_parent&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">android:layout_height</span>=<span class="string">&quot;match_parent&quot;</span></span></span><br><span class="line"><span class="tag">          <span class="attr">android:orientation</span>=<span class="string">&quot;vertical&quot;</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">android.support.v7.widget.AppCompatImageView</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">&quot;wrap_content&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">app:srcCompat</span>=<span class="string">&quot;@drawable/ic_china&quot;</span>/&gt;</span></span><br><span class="line"> <span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>

<p>根据上文是不是能推测出有app:backgroundCompat属性呢，然而并不如我们所愿，没有这样的属性。<br>所以我们只能用 android:background这个属性了，先不管这么多了直接4.4的机器上运行试试，果然崩了，在这里说明下在普通控件上使用Vector，就必须依附于StateListDrawable,InsetDrawable,LayerDrawable,LevelListDrawable,RotateDrawable我们选择selector代码如下：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">&lt;?xml version=&quot;1.0&quot; encoding=&quot;utf-8&quot;?&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">selector</span> <span class="attr">xmlns:android</span>=<span class="string">&quot;http://schemas.android.com/apk/res/android&quot;</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">item</span> <span class="attr">android:drawable</span>=<span class="string">&quot;@drawable/ic_china&quot;</span>/&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">selector</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>这样是不是完了呢？在运行试试还是崩了，这里又是一个坑…..<br>还需要在activity中添加如下代码：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">static</span> &#123;</span><br><span class="line">	AppCompatDelegate.setCompatVectorFromResourcesEnabled(<span class="keyword">true</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>完美解决问题。</p>
<h2 id="VectorDrawable-与-SVG"><a href="#VectorDrawable-与-SVG" class="headerlink" title="VectorDrawable 与 SVG"></a>VectorDrawable 与 SVG</h2><p>Android 5.0（Lollipop, API 21）后，新增了<code>&lt;vector&gt;</code>标签，以VectorDrawable的形式支持SVG类型矢量图形（SVG本质为XML标记描述的图形）。</p>
<p>SVG文件（XML）对应的VectorDrawable资源封装格式为：</p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">vector</span> <span class="attr">xmlns:android</span>=<span class="string">&quot;http://schemas.android.com/apk/res/android&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:height</span>=<span class="string">&quot;64dp&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:width</span>=<span class="string">&quot;64dp&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:viewportHeight</span>=<span class="string">&quot;600&quot;</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:viewportWidth</span>=<span class="string">&quot;600&quot;</span> &gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">group</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:name</span>=<span class="string">&quot;rotationGroup&quot;</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:pivotX</span>=<span class="string">&quot;300.0&quot;</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:pivotY</span>=<span class="string">&quot;300.0&quot;</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:rotation</span>=<span class="string">&quot;45.0&quot;</span> &gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">path</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:name</span>=<span class="string">&quot;v&quot;</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:fillColor</span>=<span class="string">&quot;#000000&quot;</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:pathData</span>=<span class="string">&quot;M300,70 l 0,-70 70,70 0,0 -70,70z&quot;</span> /&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">group</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">vector</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>※ 通常由SVG文件转换为VectorDrawable，而非手工录入</p>
<h3 id="SVG编辑软件"><a href="#SVG编辑软件" class="headerlink" title="SVG编辑软件"></a>SVG编辑软件</h3><p>Inkscape<br>跨平台开源矢量图形编辑软件，免费 + 三平台通用，支持直接编辑XML数据<br>类似的软件还有Illustrator、CorelDraw等</p>
<h3 id="SVG-转-VectorDrawable"><a href="#SVG-转-VectorDrawable" class="headerlink" title="SVG 转 VectorDrawable"></a>SVG 转 VectorDrawable</h3><p>使用 Vector Asset Studio 转换，在res目录右键菜单上选择 New &gt; Vector Asset<br>通过开源项目 svg2android 在线转换<br>※ 初始化VectorDrawable将消耗更多CPU资源，Google推荐将矢量图最大尺寸限定在 200x200dp 以内</p>
<p>VectorDrawable 向后兼容</p>
<p>对于Android 5.0之前的设备，有两种方式兼容VectorDrawable资源：</p>
<ol>
<li>利用 Vector Asset Studio 工具动态生成位图<br>Android Studio 内置一个名为 Vector Asset Studio 的工具，在低版本SDK上编译APK期间，针对VectorDrawable脚本自动生成一组PNG位图资源BitmapDrawable，取代矢量图形（在5.0及以后的手机上运行时会正常引用VectorDrawable）。</li>
</ol>
<p>需要配置build.gradle：</p>
<figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">defaultConfig &#123;</span><br><span class="line">    vectorDrawables.generatedDensities = [<span class="string">&#x27;hdpi&#x27;</span>,<span class="string">&#x27;xxhdpi&#x27;</span>]</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>※ 自动生成PNG时，所支持的VectorDrawable元素子集</p>
<ol start="2">
<li>添加 Support Library 23.2+ 兼容包<br>Support Library 23.2+ 包中包含VectorDrawableCompat和AnimatedVectorDrawableCompat兼容类，用于代码中桥接为BitmapDrawable及其动画支持，其中Drawable最低SDK为Android 2.1，动画最低SDK为Android 3.0</li>
</ol>
<p>※ 兼容包要求使用Gradle 2.0或以上版本，并且不支持VectorDrawable嵌套引用，不支持直接解析为VectorDrawable类型，也不再编译期生成PNG位图</p>
<p>build.gradle配置如下：</p>
<figure class="highlight gradle"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">android &#123;</span><br><span class="line">  defaultConfig &#123;</span><br><span class="line">    vectorDrawables.useSupportLibrary = <span class="keyword">true</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="keyword">dependencies</span> &#123;</span><br><span class="line">  <span class="keyword">compile</span> <span class="string">&#x27;com.android.support:appcompat-v7:23.2.0&#x27;</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>兼容包在矢量资源引用、代码调用时，存在一定限制<br>在 ImageView 等引用 VectorDrawable 资源时，需要使用app:srcCompat取代android:src<br>代码中使用setImageResource()指定资源 id 时，无需更改代码<br>将 VectorDrawable 用于 View 背景时，需要通过以下代码设定：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Resources resources = context.getResources(Resources, <span class="keyword">int</span>, Theme);</span><br><span class="line">Theme theme = context.getTheme();</span><br><span class="line">Drawable drawable = VectorDrawableCompat.create(resources, R.drawable.vector_drawable, theme);</span><br><span class="line">view.setBackground(drawable);</span><br></pre></td></tr></table></figure>
<p>代码中需要进行Drawable的实现类型转换时，可使用以下代码段执行：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (Build.VERSION.SDK_INT &gt;= Build.VERSION_CODES.LOLLIPOP) &#123;</span><br><span class="line">   VectorDrawable vectorDrawable =  (VectorDrawable) drawable;</span><br><span class="line">&#125; <span class="keyword">else</span> &#123;</span><br><span class="line">   BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="矢量动画"><a href="#矢量动画" class="headerlink" title="矢量动画"></a>矢量动画</h2><p>使用矢量图可进行特殊的动画绘制，比如形态变换、动态绘图等。</p>
<p><strong>主要步骤</strong><br>定义矢量资源及其关联动画 XML 脚本<br>创建矢量图形资源VectorDrawable，并在需要动画特效的子元素上使用属性android:name给定任意动画对象名<br>创建Animator属性动画脚本，可使用ObjectAnimator或AnimatorSet，对VectorDrawable的特定元素属性进行动画控制<br>创建AnimatedVectorDrawable，作用是连接VectorDrawable与Animator，组合为单一动画型Drawable对象<br>创建好的AnimatedVectorDrawable不能直接用于 ImageView，需要通过代码设定，并显式开始执行动画<br><strong>官方文档</strong><br>XML脚本具体定义方式可参考 开发手册 AnimatedVectorDrawable<br>开发手册 内联复合XML资源 提供了通过 AAPT 系统插件，实现单一XML脚本混合定义的方式，需要声明命名空间 <code>xmlns:aapt=&quot;http://schemas.android.com/aapt&quot;</code><br>在线实时输出 XML 脚本<br>Google工程师开发的开源项目 AndroidIconAnimator，可实现在线实时构造、编辑、预览 VectorDrawable 动画，并导出XML脚本，使用教程可参考 Qiita帖子</p>
<p> 代码设置<br>创建好的 VectorDrawable 动画资源，需要通过代码方式加载到 View 容器内，并指定执行动画</p>
<p>使用原生支持的代码设定（5.0 LOLLIPOP, API 21）</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">ImageView imageView = (ImageView) findViewById(R.id.imageView);</span><br><span class="line">AnimatedVectorDrawable vectorDrawable = (AnimatedVectorDrawable) getResources().getDrawable(AnimatedVectorDrawableRes, Theme);</span><br><span class="line">imageView.setImageDrawable(vectorDrawable);</span><br><span class="line">vectorDrawable.start();</span><br></pre></td></tr></table></figure>
<p>使用 Support Library 时的动画设置<br>矢量动画要求最低SDK为Android 3.0，并且不支持<code>&lt;path&gt;</code>路径类型的变换</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">ImageView imageView = (ImageView) findViewById(R.id.imageView);</span><br><span class="line">AnimatedVectorDrawableCompat drawableCompat = AnimatedVectorDrawableCompat.create(context, AnimatedVectorDrawableRes);</span><br><span class="line">imageView.setImageDrawable(drawableCompat);</span><br><span class="line">drawableCompat.start();</span><br></pre></td></tr></table></figure>
<p>可执行的特有动画效果，可参考 VectorDrawable 元素属性列表<br>所有属性中文解释可参考 Android矢量图形与矢量动画<br>其中一种动效实例，可参考博文 Android使用SVG矢量动画<br>特别介绍几个特殊属性：<br><code>&lt;group&gt;</code>元素：<br>rotation：旋转角度，取值为360角度，valueType=floatType<br>pivotX / pivotY：旋转中心坐标，以viewport为参照基准<br><code>&lt;path&gt;</code>元素：<br>pathData：矢量图形的绘制路径数据位点，可动画形变为另一种图案，要求动画参数值必须拥有相同长度参数及一致的路径描述指令，并且 ObjectAnimator 中<code>android:valueType=&quot;pathType&quot;</code>（Support 包不支持该数据进行变换动画）<br>trimPathStart：从路径起始点开始向后裁剪（擦除）的相对距离，取值 [0, 1]，，0 表示路径起始点，1 表示路径结束点，可实现逐步消退、绘制动效，<code>android:valueType=&quot;floatType&quot;</code><br>trimPathEnd：从路径结束点开始向前裁剪的相对距离，取值 [0, 1]，0 表示路径起始点，1 表示路径结束点<br>trimPathOffset：从路径起始、结束点开始裁剪的相对距离，取值 [0, 1]，0 表示不裁剪，1 表示该路径完全不绘制<br><code>&lt;clip-path&gt;</code>元素：遮罩路径、反蒙版路径，该路径范围内的元素才会真正进行绘制，作用于当前所在的<code>&lt;group&gt;</code>内定义在其后面的所有<code>&lt;path&gt;</code>元素<br>pathData：定义遮罩路径，动画操作方式与<code>&lt;path&gt;</code>相同<br>pathData 形变动画参考<br>理解Android VectorDrawable中的pathData命令<br>PathMorphing with AnimatedVectorDrawables in Android<br>【VectAlign】pathData自动算法变换对齐工具</p>
<p>已知bug：<br><code>&lt;animated-vector&gt;</code>标签在使用时会发生错误警告requires API level 21，不影响兼容包的编译运行<br>放置于animator目录内的Animator脚本，需要在<code>&lt;animated-vector&gt;</code>的<code>&lt;target&gt;</code>中手工引用@animator/资源id（自动提示补全菜单失效）<br>使用动画时，ImageView 不能使用android:tint属性，否则会导致Mutate() is not supported for older platform异常崩溃<br>通过 AAPT 标签使用单一脚本混合定义时，Android Studio 会出现识别错误提示<br>矢量动画通过关联 Property Animation 打包为 Drawable 方式实现，对属性的动态修改将影响所有同一 Drawable 资源产生的对象（Drawable 状态共享机制），并且兼容包不支持 mutate() 调用（状态分离，兼容包内要求API 23以上），实际上代码暂时无法访问矢量元素内部属性（如 pathData 等）</p>
<p>文章参考：<br>作者：慕涵盛华    原文：<a target="_blank" rel="noopener" href="https://blog.csdn.net/guofudong2/article/details/81299137">https://blog.csdn.net/guofudong2/article/details/81299137</a><br>作者：Dick_zeng   原文：<a target="_blank" rel="noopener" href="https://blog.csdn.net/dick_zeng/article/details/72473591">https://blog.csdn.net/dick_zeng/article/details/72473591</a><br>作者：陈立扬   原文：<a target="_blank" rel="noopener" href="https://www.cnblogs.com/chenliyang/p/6542896.html">https://www.cnblogs.com/chenliyang/p/6542896.html</a><br>作者：woxingxiao   原文：<a target="_blank" rel="noopener" href="https://www.jianshu.com/p/0555b8c1d26a">https://www.jianshu.com/p/0555b8c1d26a</a><br>作者：慕涵盛华   原文：<a target="_blank" rel="noopener" href="https://blog.csdn.net/guofudong2/article/details/81299137">https://blog.csdn.net/guofudong2/article/details/81299137</a><br><a target="_blank" rel="noopener" href="http://www.w3school.com.cn/svg/index.asp">http://www.w3school.com.cn/svg/index.asp</a></p>

    </div>

    
    
    

      <footer class="post-footer">
          <div class="post-tags">
              <a href="/tags/Android/" rel="tag"># Android</a>
              <a href="/tags/SVG/" rel="tag"># SVG</a>
          </div>

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/2021/08/25/OKhttp%E8%AE%BE%E7%BD%AEUserAgent%E7%9A%84%E9%82%A3%E4%BA%9B%E4%BA%8B%E5%84%BF/" rel="prev" title="OKhttp设置UserAgent的那些事儿">
      <i class="fa fa-chevron-left"></i> OKhttp设置UserAgent的那些事儿
    </a></div>
      <div class="post-nav-item">
    <a href="/2021/08/25/%E3%80%90Vue%E3%80%91%E9%A1%B9%E7%9B%AE%E9%83%A8%E7%BD%B2/" rel="next" title="【Vue】项目部署">
      【Vue】项目部署 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  



          </div>
          

<script>
  window.addEventListener('tabs:register', () => {
    let { activeClass } = CONFIG.comments;
    if (CONFIG.comments.storage) {
      activeClass = localStorage.getItem('comments_active') || activeClass;
    }
    if (activeClass) {
      let activeTab = document.querySelector(`a[href="#comment-${activeClass}"]`);
      if (activeTab) {
        activeTab.click();
      }
    }
  });
  if (CONFIG.comments.storage) {
    window.addEventListener('tabs:click', event => {
      if (!event.target.matches('.tabs-comment .tab-content .tab-pane')) return;
      let commentClass = event.target.classList[1];
      localStorage.setItem('comments_active', commentClass);
    });
  }
</script>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#%E6%A6%82%E5%BF%B5"><span class="nav-number">1.</span> <span class="nav-text">概念</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BB%80%E4%B9%88%E6%98%AF%E7%9F%A2%E9%87%8F%E5%9B%BE%EF%BC%8CSVG"><span class="nav-number">1.1.</span> <span class="nav-text">什么是矢量图，SVG</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E4%BC%98%E7%BC%BA%E7%82%B9"><span class="nav-number">1.2.</span> <span class="nav-text">优缺点</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96SVG%E5%9B%BE%E7%89%87"><span class="nav-number">1.3.</span> <span class="nav-text">获取SVG图片</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#%E8%8E%B7%E5%8F%96%E9%80%94%E5%BE%84"><span class="nav-number">1.3.1.</span> <span class="nav-text">获取途径</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#%E3%80%90iconfont%E3%80%91%E9%98%BF%E9%87%8C%E5%A6%88%E5%A6%88%E7%9F%A2%E9%87%8F%E5%9B%BE%E6%A0%87%E5%B9%B3%E5%8F%B0"><span class="nav-number">1.3.2.</span> <span class="nav-text">【iconfont】阿里妈妈矢量图标平台</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#iconfont%E7%9A%84%E5%B0%81%E8%A3%85"><span class="nav-number">1.3.3.</span> <span class="nav-text">iconfont的封装</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#iconfont%E5%8A%A8%E6%80%81%E8%AE%BE%E7%BD%AE"><span class="nav-number">1.4.</span> <span class="nav-text">iconfont动态设置</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E4%BD%BF%E7%94%A8SVG"><span class="nav-number">2.</span> <span class="nav-text">使用SVG</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#%E5%8F%AF%E8%83%BD%E9%81%87%E8%A7%81%E7%9A%84%E5%9D%91"><span class="nav-number">3.</span> <span class="nav-text">可能遇见的坑</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#VectorDrawable"><span class="nav-number">3.1.</span> <span class="nav-text">VectorDrawable</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-0%E4%BB%A5%E4%B8%8A%E7%89%88%E6%9C%AC%E4%BD%BF%E7%94%A8"><span class="nav-number">3.2.</span> <span class="nav-text">5.0以上版本使用</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-0%E4%BB%A5%E4%B8%8B%E7%89%88%E6%9C%AC%E4%BD%BF%E7%94%A8SVG"><span class="nav-number">3.3.</span> <span class="nav-text">5.0以下版本使用SVG</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#VectorDrawable-%E4%B8%8E-SVG"><span class="nav-number">3.4.</span> <span class="nav-text">VectorDrawable 与 SVG</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#SVG%E7%BC%96%E8%BE%91%E8%BD%AF%E4%BB%B6"><span class="nav-number">3.4.1.</span> <span class="nav-text">SVG编辑软件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#SVG-%E8%BD%AC-VectorDrawable"><span class="nav-number">3.4.2.</span> <span class="nav-text">SVG 转 VectorDrawable</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#%E7%9F%A2%E9%87%8F%E5%8A%A8%E7%94%BB"><span class="nav-number">3.5.</span> <span class="nav-text">矢量动画</span></a></li></ol></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
  <p class="site-author-name" itemprop="name">vchao</p>
  <div class="site-description" itemprop="description">怀揣好奇，梦想改变世界的菜鸟极客</div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/archives/">
        
          <span class="site-state-item-count">46</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
        <span class="site-state-item-count">4</span>
        <span class="site-state-item-name">分类</span>
      </div>
      <div class="site-state-item site-state-tags">
        <span class="site-state-item-count">27</span>
        <span class="site-state-item-name">标签</span>
      </div>
  </nav>
</div>



      </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

        
  <div class="beian"><a href="https://beian.miit.gov.cn/" rel="noopener" target="_blank">冀ICP备 17022751号-1 </a>
      <img src="https://beian.miit.gov.cn" style="display: inline-block;">
  </div>

<div class="copyright">
  
  &copy; 
  <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
    <i class="fa fa-heart"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">vchao</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> & <a href="https://muse.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Muse</a> 强力驱动
  </div>

        








      </div>
    </footer>
  </div>

  
  <script src="/lib/anime.min.js"></script>
  <script src="/lib/velocity/velocity.min.js"></script>
  <script src="/lib/velocity/velocity.ui.min.js"></script>

<script src="/js/utils.js"></script>

<script src="/js/motion.js"></script>


<script src="/js/schemes/muse.js"></script>


<script src="/js/next-boot.js"></script>




  















  

  

</body>
</html>
